<template>
  <div class="lxwm">
   <router-link class="nav-btn" to="/home"></router-link>
   <div class="sub-head xmys-head">
      <div class="sub-head1 xmys-head1 animated rollIn">&nbsp;</div>
      <div class="sub-head2-wrap xmys-head2-wrap animated height1 delay-2">
        <div class="sub-head2 xmys-head2">&nbsp;</div>
      </div>
      <div class="sub-head3 xmys-head3 animated bounceIn delay-4">&nbsp;</div>
      <div class="sub-head4 xmys-head4 animated fadeIn delay-5">
        <ul class="waves">
          <li class="li1">
            <span class="ani-li"></span>
          </li>
          <li class="li2">
            <span class="ani-li"></span>
          </li>
          <li class="li3">
            <span class="ani-li"></span>
          </li>
        </ul>
      </div>
      <div class="sub-head5 xmys-head5 animated fadeIn delay-5">
        <ul class="waves waves1">
          <li class="li1">
            <span class="ani-li"></span>
          </li>
          <li class="li2">
            <span class="ani-li"></span>
          </li>
          <li class="li3">
            <span class="ani-li"></span>
          </li>
        </ul>
      </div>
      <div class="sub-head6 xmys-head6 animated fadeIn"></div>
    </div>
    <div class="xmys">
      <img src alt v-lazy="xmysimg1">
      <img src alt v-lazy="xmysimg2">
      <div class="xmysimg3-wrap">
        <img src alt v-lazy="xmysimg3">
        <div class="xmys-gif1">
          <img src alt v-lazy="xmysimg11">
        </div>
      </div>
      <img src alt v-lazy="xmysimg4">
      <div class="xmysimg5-wrap">
        <img src alt v-lazy="xmysimg5">
        <div class="lbt">
          <swiper :options="swiperOption" ref="mySwiper">
            <swiper-slide>
              <img width="100%" src="../assets/images/xmys-swiper1.jpg" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/xmys-swiper2.jpg" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/xmys-swiper3.jpg" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/xmys-swiper4.jpg" alt>
            </swiper-slide>
            <swiper-slide>
              <img width="100%" src="../assets/images/xmys-swiper5.jpg" alt>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
        </div>
      </div>
      <img src alt v-lazy="xmysimg6">
      <div class="xmysimg7-wrap">
        <img src alt v-lazy="xmysimg7">
        <div class="xmys-gif2">
          <img src alt v-lazy="xmysimg12">
        </div>
      </div>
      <img src alt v-lazy="xmysimg8">
      <img src alt v-lazy="xmysimg9">
      <div class="xmysimg10-wrap">
        <img src alt v-lazy="xmysimg10">
        <div class="xmys-gif3">
          <img src alt v-lazy="xmysimg13">
        </div>
        <div class="xmys-gif4">
          <img src alt v-lazy="xmysimg14">
        </div>
        <div class="xmys-gif5">
          <img src alt v-lazy="xmysimg15">
        </div>
        <div class="xmys-gif6">
          <img src alt v-lazy="xmysimg16">
        </div>
      </div>
    </div>
    <div class="next-bg">
      <div class="next-3 animated fadeIn"></div>
      <div class="next-4 animated fadeIn"></div>
      <div class="next-5 animated fadeIn"></div>
      <router-link to="/tzyl" class="next-img-wrap">
        <img src="../assets/images/next-1.png" class="next-img" alt>
      </router-link>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'xmys',
  data () {
    return {
       xmysimg1: require("@/assets/images/xmys-img1.jpg"),
       xmysimg2: require("@/assets/images/xmys-img2.jpg"),
       xmysimg3: require("@/assets/images/xmys-img3.jpg"),
       xmysimg4: require("@/assets/images/xmys-img4.jpg"),
       xmysimg5: require("@/assets/images/xmys-img5.jpg"),
       xmysimg6: require("@/assets/images/xmys-img6.jpg"),
       xmysimg7: require("@/assets/images/xmys-img7.jpg"),
       xmysimg8: require("@/assets/images/xmys-img8.jpg"),
       xmysimg9: require("@/assets/images/xmys-img9.jpg"),
       xmysimg10: require("@/assets/images/xmys-img10.jpg"),
       xmysimg11: require("@/assets/images/xmys-gif1.gif"),
       xmysimg12: require("@/assets/images/xmys-gif2.gif"),
       xmysimg13: require("@/assets/images/xmys-gif3.gif"),
       xmysimg14: require("@/assets/images/xmys-gif4.gif"),
       xmysimg15: require("@/assets/images/xmys-gif5.gif"),
       xmysimg16: require("@/assets/images/xmys-gif6.gif"),
       swiperOption: {
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    }
  },
  mounted: function(){
      
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
 components: {
    swiper,
    swiperSlide
  }
}
</script>

<style scoped>
.xmys img {
  display: block;
  width: 100%;
}
.swiper-pagination >>>.swiper-pagination-bullet-active{
    background: #d71c25;
}
.xmys-head {
  background:url(../assets/images/xmys-head.jpg); 
  background-size: 100% 100%;
  z-index: 10;
}
.xmys-head1 {
  left: 7.625rem;
}
.xmys-head2-wrap {
  left: 8.5rem;
  height: 5.975rem;
}
.xmys-head2 {
  background:url(../assets/images/xmys-head2.png); 
  background-size: 100% 100%;
}
.xmys-head3 {
  left: 3.4rem;
  width: 12.275rem;
  height: 16.375rem;
  background:url(../assets/images/xmys-head3.png); 
  background-size: 100% 100%;
}
.xmys-head4{
 left: 2.1rem;
 top: 14.225rem;
}
.xmys-head5{
 left: 12.375rem;
 top: 14.225rem;
}
.xmys-head6{
  position: absolute;
  left:0;
  bottom:1.8rem ;
  width: 100%;
  height: 15.575rem;
  background: url(../assets/images/ppjs-mls.gif) no-repeat center center;
  background-size: 100% 100%;
}
.xmysimg3-wrap,.xmysimg5-wrap,.xmysimg7-wrap,.xmysimg10-wrap{
  position: relative;
}
.xmys-gif1{
  position: absolute;
  left: 1.075rem;
  top: 14.55rem;
  width: 7.725rem;
  height: 4.075rem;
}
.xmys-gif2{
  position: absolute;
  left: 8.95rem;
  top: 6.875rem;
  width: 8.325rem;
  height: 5.625rem;
}
.xmys-gif3{
  position: absolute;
  left: .775rem;
  top: 2.2rem;
  width: 8.05rem;
  height: 6.4rem;
}
.xmys-gif4{
  position: absolute;
  left: 9.175rem;
  top: 2.2rem;
  width: 8.05rem;
  height: 6.4rem;
}
.xmys-gif5{
  position: absolute;
  left: .775rem;
  top: 11.1rem;
  width: 8.05rem;
  height: 6.4rem;
}
.xmys-gif6{
  position: absolute;
  left: 9.175rem;
  top: 11.1rem;
  width: 8.15rem;
  height: 6.5rem;
}
.lbt{
  position: absolute;
  left: .725rem;
  top: 0;
  width: 16.475rem;
  height: 11rem;
}
</style>
